<template>
  <div class="home-renew">
    <div class="home-renew-title">续费预警</div>
    <div class="home-renew-list">
      <div
        v-for="(item, key) in list"
        :key="key"
        class="home-renew-cell"
        @click="toDetail(key)"
      >
        <div class="home-renew-value">{{ item }}</div>
        <div class="home-renew-dic">{{ key }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { getRenewAlert } from '../api'
import { useRouter } from  'vue-router'
import { useMenuStore } from '@/plugins/store'
const menus = useMenuStore()

const router = useRouter()

const list = ref({})
getRenewAlert({ date: dayjs().format('YYYY-MM-DD') })
  .then(res => {
    list.value = res || {}
  })

const toDetail = key => {
  const map = {
    '已到期': '-1',
    '今日到期': '1',
    '最近三天到期': '3',
    '最近一周到期': '7'
  }
  const tag = {
    name: "平台客户管理",
    routeName: "CustomerManagement",
    router: "/customer-management"
  }
  menus.removeTag(tag)
  sessionStorage.setItem('CustomerManagement.stopDays', map[key] || '')
  router.push({ name: "CustomerManagement" })
}
</script>

<style scoped lang="scss">
.home-renew {
  height: 183px;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 25px;
  box-sizing: border-box;
  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
  }
  &-list {
    margin-top: 24px;
    height: 87px;
    display: flex;
  }
  &-cell {
    height: 87px;
    background: #F8F9FC;
    border-radius: 8px;
    flex-grow: 1;
    width: 25%;
    padding: 14px 20px;
    box-sizing: border-box;
    & + & {
      margin-left: 56px;
    }
  }
  &-value {
    font-family: DOUYINSANSBOLD-GB;
    font-weight: GB;
    font-size: 28px;
    color: #333333;
  }
  &-dic{
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #333333;
    margin-top: 8px;
  }
}
</style>
